<script lang="ts" setup>
import { computed, onBeforeMount, onMounted, ref } from 'vue';

import Background from '@/components/web-os/Background.vue';
import DeskTop from '@/components/web-os/DeskTop.vue';
import LaunchPad from '@/components/web-os/LaunchPad.vue';
import Loading from '@/components/web-os/Loading.vue';
import Login from '@/components/web-os/Login.vue';

import { useAppStore, useAuthStore } from './store';

defineOptions({ name: 'App' });

const authStore = useAuthStore();
const appStore = useAppStore();
const isBg = ref(true);
const isLoading = ref(false);
const showLogin = computed(() => {
  return appStore.showLogin;
});
const isDeskTop = computed(() => {
  return appStore.isDeskTop;
});
const isLaunchPad = ref(false);
const isLogin = ref(false);

const onContextShow = () => {
  // console.log('onContextShow');
};
const boot = () => {
  isLoading.value = showLogin.value;
  isLogin.value = !showLogin.value;
  if (!isLogin.value) {
    document.body.style.removeProperty('--wos-login-blur');
    appStore.setShowLogin(false);
  }
};
const loaded = () => {
  isLoading.value = false;
  isBg.value = true;
  if (!isLogin.value) {
    document.body.style.setProperty('--wos-login-blur', '100px');
    appStore.setShowLogin(true);
  }
};
const logined = () => {
  appStore.login();
};
const lockScreen = () => {
  document.body.style.setProperty('--wos-login-blur', '100px');
  appStore.setShowLogin(true);
};
const launchpad = (show: boolean) => {
  isLaunchPad.value = show;
};
const logout = () => {
  authStore.logout();
};
const shutdown = () => {
  authStore.logout();
  isLoading.value = false;
  isBg.value = false;
};

onMounted(() => {
  boot();
});

onBeforeMount(() => {
  appStore.loadDefaultFont();
});

</script>

<template>
  <div
    class="t-os"
    @contextmenu.prevent="onContextShow()"
    @mousedown.self="boot"
  >
    <transition key="bg" name="fade">
      <div v-if="isBg">
        <Background />
      </div>
    </transition>
    <transition key="loading" name="fade">
      <div v-if="isLoading">
        <Loading @loaded="loaded" />
      </div>
    </transition>
    <transition key="login">
      <div v-if="showLogin">
        <Login @logined="logined" />
      </div>
    </transition>
    <transition key="deskTop" name="fade">
      <div v-if="isDeskTop">
        <DeskTop
          @launchpad="launchpad"
          @lock-screen="lockScreen"
          @logout="logout"
          @shutdown="shutdown"
        />
      </div>
    </transition>
    <transition key="launchPad" name="fade">
      <div v-if="isLaunchPad">
        <LaunchPad />
      </div>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.t-os {
  position: absolute;
  inset: 0;
}
</style>
